<template>
  <a-card :bordered="false" style="padding-top: 24px;width: 100%;border-radius: 4px">
    <a-form layout="inline">
      <div class="search">
        <div class="searchForm">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="活动标题">
                <a-input placeholder="请输入活动标题" v-model="queryForm.eventName" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :label="`活动状态`">
                <a-select v-model="queryForm.status" placeholder="请选择活动状态" :style="{width:'200px'}">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    未开始
                  </a-select-option>
                  <a-select-option value="02">
                    进行中
                  </a-select-option>
                  <a-select-option value="03">
                    已结束
                  </a-select-option>
                  <a-select-option value="04">
                    暂停
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-button :style="{marginTop:'10px'}" type="primary" @click="handleSearch">
                查询
              </a-button>
              &nbsp;
              <a-button :style="{marginTop:'10px'}" @click="handleReset">
                重置
              </a-button>
            </a-col>
          </a-row>
        </div>

        <div class="tableTool">
          <a-button type="primary" @click="addEventModalVisible = !addEventModalVisible">
            创建活动
          </a-button>
        </div>
      </div>
    </a-form>

    <a-table
      :rowKey="`eventNo`"
      :columns="columns"
      :data-source="data"
      :style="{marginTop:'15px',float:'left',width:'100%'}"
      :pagination="{ pageSize: 10,total:total }"
      @change="tableChange">
      <template slot="eventDetail" slot-scope="text,record">
        <div v-if="record.meet1">满{{ record.meet1 }}减{{ record.off1 }}</div>
        <div v-if="record.meet2">满{{ record.meet2 }}减{{ record.off2 }}</div>
        <div v-if="record.meet3">满{{ record.meet3 }}减{{ record.off3 }}</div>
        <div v-if="record.meet4">满{{ record.meet4 }}减{{ record.off4 }}</div>
        <div v-if="record.meet5">满{{ record.meet5 }}减{{ record.off5 }}</div>
      </template>
      <template slot="status" slot-scope="text,record">
        <span v-if="record.status == '01'">未开始</span>
        <span v-if="record.status == '02'">进行中</span>
        <span v-if="record.status == '03'">已结束</span>
        <span v-if="record.status == '04'">暂停</span>
      </template>
      <template slot="eventTime" slot-scope="text,record">
        <span>
          {{ record.eventStartTime }} 至 {{ record.eventEndTime }}
        </span>
      </template>
      <template slot="action" slot-scope="text,record,index">
        <a v-if="record.status == '01' || record.status == '02'" @click="handleUpdateEvent(record,index,'04')">暂停</a>
        <a v-if="record.status == '04'" @click="handleUpdateEvent(record,index,'02')">开始</a>
      </template>
    </a-table>

    <a-modal
      title="创建活动"
      :visible="addEventModalVisible"
      :width="600"
      :closable="false"
      @cancel="addEventModalVisible = !addEventModalVisible"
      @ok="handleAddEvent">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="活动标题">
          <a-input v-model="addForm.eventName" :style="{width:'350px',borderRadius:'4px'}" placeholder="请输入活动标题"/>
        </a-form-item>
        <a-form-item label="活动时间">
          <a-range-picker
            v-model="addForm.eventTimeArray"
            :style="{width:'350px',borderRadius:'4px'}"
            :placeholder="['开始时间', '结束时间']"/>
        </a-form-item>
        <a-form-item label="优惠设置">
          <div>
            <div>阶梯满减（最多支持5个层级）</div>
            <div v-if="count >= 1">
              满
              <a-input v-model="addForm.meet1" :style="{width:'80px'}"/>
              减
              <a-input v-model="addForm.off1" :style="{width:'80px'}"/>
            </div>
            <div v-if="count >= 2">
              满
              <a-input v-model="addForm.meet2" :style="{width:'80px'}"/>
              减
              <a-input v-model="addForm.off2" :style="{width:'80px'}"/>
            </div>
            <div v-if="count >= 3">
              满
              <a-input v-model="addForm.meet3" :style="{width:'80px'}"/>
              减
              <a-input v-model="addForm.off3" :style="{width:'80px'}"/>
            </div>
            <div v-if="count >= 4">
              满
              <a-input v-model="addForm.meet4" :style="{width:'80px'}"/>
              减
              <a-input v-model="addForm.off4" :style="{width:'80px'}"/>
            </div>
            <div v-if="count >= 5">
              满
              <a-input v-model="addForm.meet5" :style="{width:'80px'}"/>
              减
              <a-input v-model="addForm.off5" :style="{width:'80px'}"/>
            </div>
            <div>
              <a @click="count++">增加层级</a>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="允许叠加店铺券">
          <a-radio-group :options="options" v-model="addForm.canOverlayCoupon"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>

</template>

<script>
  import { addMoneyOff, queryMoneyOff, updateMoneyOff } from '@/api/moneyOff'

  const columns = [
    {
      title: '活动标题',
      dataIndex: 'eventName',
      key: 'eventName'
    },
    {
      title: '活动详细',
      key: 'eventDetail',
      scopedSlots: { customRender: 'eventDetail' }
    },
    {
      title: '活动时间',
      key: 'eventTime',
      scopedSlots: { customRender: 'eventTime' }
    },
    {
      title: '活动状态',
      key: 'status',
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  const options = [
    { label: '允许', value: '01' },
    { label: '不允许', value: '02' }
  ]

  export default {
    name: 'MoneyOff',
    data () {
      return {
        options,
        columns,
        data: [],
        total: 0,
        queryForm: {
          eventName: '',
          status: '',
          pageNumb: 1,
          pageSize: 10
        },
        addEventModalVisible: false,

        addForm: {
          eventName: '',
          eventTimeArray: [],
          eventStartTime: '',
          eventEndTime: '',
          meet1: '',
          meet2: '',
          meet3: '',
          meet4: '',
          meet5: '',
          off1: '',
          off2: '',
          off3: '',
          off4: '',
          off5: '',
          canOverlayCoupon: ''
        },

        count: 1
      }
    },
    methods: {
      handleAddEvent () {
        if (this.addForm.eventTimeArray && this.addForm.eventTimeArray.length > 0) {
          this.addForm.eventStartTime = this.addForm.eventTimeArray[0].format('YYYY-MM-DD HH:mm:ss')
          this.addForm.eventEndTime = this.addForm.eventTimeArray[1].format('YYYY-MM-DD HH:mm:ss')
        }
        addMoneyOff(this.addForm).then(rsp => {
          this.addEventModalVisible = !this.addEventModalVisible
          this.addForm = {}
          this.data.splice(this.data.length, 0, rsp)
        })
      },
      handleUpdateEvent (record, index, status) {
        updateMoneyOff({ eventNo: record.eventNo, status: status }).then(rsp => {
          this.data.splice(index, 1, rsp)
        })
      },
      tableChange (pagination) {
        this.queryForm.pageNumb = pagination.current
        queryMoneyOff(this.queryForm).then(rsp => {
          this.total = rsp.total
          this.data = rsp.data
        })
      }
    },
    mounted () {
      queryMoneyOff(this.queryForm).then(rsp => {
        this.total = rsp.total
        this.data = rsp.data
      })
    }
  }
</script>

<style scoped>
  .search {
    width: 100%;
  }

  .searchForm {
    float: left;
    width: 92%;
  }

  .searchBtn {
    border-left: 1px solid #edeff2;
    float: right;
    width: 8%;
    padding-left: 20px;
  }

  .tableTool {
    float: right;
    padding-top: 15px;
  }

  .ant-form-item-label {
    width: 100px !important;
  }
</style>
